/* $Id: _queries.scss 277 2012-11-26 23:26:32Z bobcat $ */
@media (min-width: 30em) {
  #groups {
    height: auto;
  }

  .gallery {
    top: 0;

    a {
      @include border-radius(.5em);
      border: $border-width solid $border-color;
      font-size: 1.5em;
      padding: .25em 0 .2em 0;
    }

    article {
      @include columnize(2, 2%, .5%, 1);
      position: relative;
      padding-bottom: 1.1em;
      padding-top: 1.1em;
      height: auto;
      left: 0;
      top: 0;
      height: auto;
    }

    .prev, .next {
      display: none;
    }
  }
}

@media (min-width: 40em) {
  .gallery {
    article {
      border-bottom: 1px solid $border-color;
    }

    a {
      font-size: 1.3em;
      border: none;
    }
  }
}

@media (min-width: 55em) {
  .gallery article {
    @include columnize(3, 2%, .5%);
  }
}

@media (min-width: 75em) {
  .back {
    #whats-new, #groups {
      margin-left: auto;
      margin-right: auto;
    }

    #whats-new {
      width: 70%;
    }

    #groups {
      width: 75%;
    }
  }
}

@media (min-width: 80em) {
  $left-col-width: 13em;
  $right-col-width: 16em;
  $col-padding: 1em;
  $num-cols: 3;

  .front {
    @include holy-grail($left-col-width, $right-col-width, $col-padding, $num-cols);
  }
}

@media (min-width: 85em) {
  .back {
    .gallery article {
      @include columnize(3, 2%, .5%);
    }
  }
}

@media (min-width: 95em) {
  .front {
    .gallery article {
      @include columnize(4, 2%, .5%);
    }
  }
}